#第 22 章：Canvas 可视化交互

# 确保 Gateway 正在运行
openclaw gateway status

# 查看 Canvas 访问地址
openclaw config get canvas.url

# 如果 Gateway 未启动，先启动它
openclaw gateway start

# Canvas 默认监听地址
echo "Canvas URL: http://localhost:18789/canvas/"

# 通过 CLI 在 Canvas 中打开文件进行编辑
openclaw canvas open ~/.openclaw/workspace/SOUL.md

# 打开单一文件并进入全屏编辑模式
openclaw canvas open --layout full README.md

# 同时打开多个文件进行对比编辑
openclaw canvas open --layout split file1.md file2.md

# 在 Canvas 中监控当前 Pipeline 执行
openclaw canvas monitor --pipeline tutorial-auto

# 监控所有 Cron 任务状态
openclaw canvas monitor --cron

# 监控 Gateway 资源使用
openclaw canvas monitor --resources

# 将自定义小部件注册到 Canvas
openclaw canvas widget add memory-overview \
  --file widgets/memory-overview.html \
  --position bottom-left

# 查看已注册的小部件
openclaw canvas widget list

# 移除小部件
openclaw canvas widget remove memory-overview

# 告诉 Agent 将输出发送到 Canvas
openclaw chat --canvas "请分析 cron/runs 目录下最近 10 次任务执行结果，生成趋势图"

# Agent 可以动态更新 Canvas 内容
# 对话中输入：
# "请在 Canvas 中创建一个记忆系统架构图（Mermaid 格式）"

# Step 1: 检查 Gateway 状态
openclaw gateway status

# Step 2: 确认 Canvas 已启用
openclaw config get canvas.enabled

# Step 3: 获取 Canvas URL
CANVAS_URL=$(openclaw config get canvas.url 2>/dev/null || echo "http://localhost:18789/canvas/")
echo "Canvas URL: $CANVAS_URL"

# Step 4: 检查 Canvas 页面是否可访问
curl -s -o /dev/null -w "%{http_code}" "$CANVAS_URL" && echo " ✅ Canvas 可访问" || echo " ❌ Canvas 不可访问"

# Step 1: 创建自定义样式目录
mkdir -p ~/.openclaw/canvas/styles/

# Step 2: 编写自定义主题
cat > ~/.openclaw/canvas/styles/my-theme.css << 'EOF'
:root {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --accent: #0f3460;
  --highlight: #e94560;
}

.canvas-editor {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  line-height: 1.6;
}
EOF

# Step 3: 应用自定义主题
openclaw config set canvas.theme my-theme
echo "✅ 自定义主题已应用，刷新浏览器查看效果"

# Step 1: 创建仪表板配置
cat > ~/.openclaw/canvas/dashboard.json << 'EOF'
{
  "layout": "grid",
  "columns": 2,
  "widgets": [
    {
      "id": "agent-status",
      "type": "agentStatus",
      "title": "Agent 状态",
      "refreshInterval": 5000
    },
    {
      "id": "cron-history",
      "type": "cronHistory",
      "title": "Cron 执行历史",
      "maxItems": 20
    },
    {
      "id": "memory-stats",
      "type": "memoryStats",
      "title": "记忆系统",
      "showChart": true
    }
  ]
}
EOF

# Step 2: 验证配置
python3 -m json.tool ~/.openclaw/canvas/dashboard.json > /dev/null \
  && echo "✅ 仪表板配置有效" \
  || echo "❌ 配置格式错误"

# Step 3: 重启 Canvas 加载新配置
openclaw gateway reload
echo "仪表板已配置，访问 Canvas 的 /dashboard 路径查看"